<template>
    <div>
        <Row>
            <Form :model="selectObj" inline>
<!--                <FormItem>-->
<!--                    <Input v-model="selectObj.driver_name" clearable placeholder="姓名"/>-->
<!--                </FormItem>-->
<!--                <FormItem>-->
<!--                    <Input v-model="selectObj.driver_cardno" clearable placeholder="身份证号"/>-->
<!--                </FormItem>-->
<!--                <FormItem>-->
<!--                    <Input v-model="selectObj.driver_tel" clearable placeholder="联系方式"/>-->
<!--                </FormItem>-->
                <FormItem>
                    <Input v-model="selectObj.car_number" clearable placeholder="车牌号"/>
                </FormItem>
                <FormItem>
                    <Button type="primary" :loading="tableLoading" @click="searchAction">搜索</Button>
                </FormItem>
            </Form>
        </Row>
        <Row>
            <Table :loading="tableLoading" border :columns="tableColumns" :data="tableData">
              <template slot-scope="{ row }" slot="is_zhd">
                <span v-if="row.is_zhd === '1'">是</span>
                <span v-if="row.is_zhd === '2'">否</span>
              </template>
                <template slot-scope="{ row }" slot="action">
                    <Button type="primary" class="actionBtn" size="small" @click="queryAction(row)">查询</Button>
                </template>
            </Table>
        </Row>
        <br>
        <Row type="flex" justify="end">
            <Page show-total :current="pageObj.pageNo" :page-size="pageObj.pageSize" :total="pageObj.totalRecord" @on-change="getPageNo"/>
        </Row>

        <M :showModal="showModal" :code="code"  @closeM="showModal = false" />
    </div>
</template>

<script>
import {
  findCargoChuShenList,
  getCargoTransportationInfoByCode
} from '../../api/system/record'
import M from './theShenDetail'
import expandRow from './table-expand.vue'
export default {
  components: { M, expandRow },
  name: 'UserList',
  data () {
    return {
      code: {}, // 详情数据
      showModal: false,
      tableLoading: false,
      tableColumns: [
        {
          type: 'expand',
          width: 50,
          render: (h, params) => {
            return h(expandRow, {
              props: {
                row: params.row
              }
            })
          }
        },
        // {
        //   title: '驾驶员姓名',
        //   key: 'driver_name',
        //   tooltip: true,
        //   align: 'center'
        // },
        // {
        //   title: '驾驶员联系方式',
        //   key: 'driver_tel',
        //   tooltip: true,
        //   align: 'center'
        // },
        {
          title: '车牌号',
          key: 'car_number',
          tooltip: true,
          align: 'center'
        },
        // {
        //   title: '道路运输',
        //   key: 'dlys',
        //   tooltip: true,
        //   align: 'center'
        // },
        // {
        //   title: '是否为高风险地区',
        //   key: 'is_zhd',
        //   tooltip: true,
        //   align: 'center'
        // },
        {
          title: '出锦时间',
          key: 'arrive_type_one',
          tooltip: true,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('span', params.row.create_time)
            ])
          }
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center',
          tooltip: true
        }
      ],
      tableData: [
        {
          company_name: 1,
          login_name: 2,
          name: 2,
          mobile: 4
        }
      ],
      selectObj: {},
      pageObj: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 1
      }
    }
  },
  methods: {
    success () {
      this.$Message.success('操作成功')
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    getUserListAction (data) {
      const obj = {
        ...this.pageObj
      }
      let param = this.$common.xeUtils.isEmpty(data) ? obj : data
      this.tableLoading = true
      findCargoChuShenList(param).then(ret => {
        console.log(ret, 'ret')
        let data = ret.data
        if (data.errcode === 0) {
          this.tableData = data.data.results
          this.pageObj.totalRecord = data.data.totalRecord
          this.tableLoading = false
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    searchAction () {
      this.pageObj.pageNo = 1
      const param = {
        ...this.selectObj,
        ...this.pageObj
      }
      this.getUserListAction(param)
    },
    async queryAction (row) {
      console.log(row)
      const res = await getCargoTransportationInfoByCode({ register_code: row.register_code })
      console.log(res)
      const fr = ['jck_qd', 'jck_jyzm', 'hs_zm', 'xs_zm']
      fr.forEach(i => {
        if (res.data.data.coldchainList[0][i].indexOf(',') === -1) {
          res.data.data.coldchainList[0][i] = [res.data.data.coldchainList[0][i]]
        } else {
          res.data.data.coldchainList[0][i] = res.data.data.coldchainList[0][i].split(',')
        }
      })
      this.code = res.data.data
      this.showModal = true
    },

    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      const param = {
        ...this.selectObj,
        ...this.pageObj
      }
      this.getUserListAction(param)
    }
  },
  mounted () {
    this.getUserListAction()
  }
}
</script>

<style scoped>
    .actionBtn {
        margin-right: 5px;
        margin-bottom: 5px;
    }
</style>
